<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | Dashboard</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../adminlte/plugins/font-awesome/css/font-awesome.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../adminlte/dist/css/adminlte.min.css">
    <!-- 模态框css -->
    <link rel="stylesheet" href="../dece/css/de_pop.css">

</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper" id="app" v-cloak>

    <!-- Navbar -->
    <super-navbar></super-navbar>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <super-aside></super-aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-12">
                        <h1 class="m-0 text-dark">订单管理</h1>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">搜索</h3>
                            <div class="card-tools">
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control">
                                    <input type="text" class="form-control">
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                        <table class="table table-condensed">
                        <tr>
                            <th style="width: 10%">订单ID</th>
                            <th style="width: 5%">订单金额</th>
                            <th style="width: 5%">支付金额</th>
                            <th style="width: 7%">姓名</th>
                            <th style="width: 9%">手机</th>
                            <th style="width: 37%">地址</th>
                            <th style="width: 5%">支付时间</th>
                            <th style="width: 7%">状态</th>
                            <th style="width: 15%">操作</th>
                        </tr>
                        <tr v-for="row in data_list">
                            <td>{{row.id}}</td>
                            <td>{{row.price}}</td>
                            <td>{{row.pay_price}}</td>
                            <td>{{row.truename}}</td>
                            <td>{{row.mobile}}</td>
                            <td>{{row.address}}</td>
                            <td>{{row.pay_time}}</td>
                            <td v-if="row.stat == 0">未支付</td>
                            <td v-else-if="row.stat == 1">已支付</td>
                            <td v-else-if="row.stat == 2">待收货</td>
                            <td v-else-if="row.stat == 3">已完成</td>
                            <td v-else-if="row.stat == 4">退款中</td>
                            <td v-else-if="row.stat == 5">已退款</td>
                            <td>
                                <button @click="detail(row.id)" type="button" class="btn btn-outline-info btn-sm">查看</button>
                                <button @click="change(row.id)" type="button" class="btn btn-outline-success btn-sm">修改</button>
                                <!-- <button @click="del(row.id)" type="button" class="btn btn-outline-danger btn-sm">删除</button> -->
                            </td>
                        </tr>
                        </table>
                        </div>
                        <div class="card-footer clearfix">
                            <ul class="pagination pagination-sm m-0 float-right">
                                <li class="page-item"><a @click="index(1)" class="page-link" href="#">&laquo;</a></li>
                                <template v-for="(val, key) in pages.all_page">
                                    <li class="page-item" :class="{active: val == pages.p}"><a @click="index(val)" class="page-link" href="#">{{val}}</a></li>
                                </template>
                                <li class="page-item"><a @click="index(pages.all_page)" class="page-link" href="#">&raquo;</a></li>
                            </ul>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
    <!-- 添加的模态框 -->
    <div class="pop" style="display: none;" v-show="pop.info == 1">
        <div class="pop_mid">
        <div class="pop_box">
            <div class="header">
                <h3>订单信息</h3>
                <div @click="pop_tig('info', 0)">X</div>
            </div>
            <div class="block" style="font-size: 14px;">
                订单信息
                <br>
                <div style="color: #666">
                    订单号: {{pop.dd.id}}
                    <br>
                    收件人: {{pop.dd.truename}}
                    <br>
                    手机号: {{pop.dd.mobile}}
                    <br>
                    送货地址: {{pop.dd.address}}
                    <br>
                    支付状态: 
                    <span v-if="pop.dd.stat == 0" style="color: #F56C6C">未支付</span>
                    <span v-else-if="pop.dd.stat == 1" style="color: #67C23A">已支付</span>
                    <span v-else style="color: #409EFF">其他状态</span>
                    <br>
                    订单金额: <span style="color: #F56C6C">{{pop.dd.price}}</span>/元
                    <br>
                    支付金额: <span style="color: #F56C6C">{{pop.dd.pay_price}}</span>/元
                </div>
                订单明细
                <br>
                <div>
                <table class="table table-border">
                <tr>
                    <th>名称</th>
                    <th>图片</th>
                    <th>价格</th>
                    <th>数量</th>
                </tr>
                <tr v-for="pd in pop.dd.order_item">
                    <td>{{pd.goods_name}}</td>
                    <td><img :src="api_host + pd.images" style="width: 32px;height: 32px;"></td>
                    <td>{{pd.special_price}}</td>
                    <td>{{pd.number}}</td>
                </tr>
                </table>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="../adminlte/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../adminlte/dist/js/adminlte.js"></script>
<!-- 新加js -->
<script src="../dece/js/vue.js"></script>
<script src="../dece/js/axios.min.js"></script>
<script src="../dece/js/app.js"></script>
<script src="../dece/js/vue_component.js"></script>
<script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                // 模态框配置
                pop: {
                    add: 1,
                    info: 0,
                    dd: {}
                },
                api_host: de.api_host,
                data_list: {},
                type_list: {},
                pages: {},
            },
            created: function (){
                this.index(1);
            },
            mounted: function (){

            },
            methods: {
                // 列表
                index: function ( p ){
                    var the = this;
                    axios.post(de.order_index, {stat: 0, p: p}).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            the.data_list = dd.data;
                            the.pages = de.page(dd.page);
                            // console.log(the.pages);
                        } else if (dd.code == 230) {
                            alert(dd.info);
                            de.href("../index.html");
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                // 查看订单详情
                detail: function ( id ){
                    var the = this;
                    axios.post(de.order_detail, {id: id}).then(function (data){
                        var dd = data.data;
                        console.log(dd);
                        if (dd.code == 200) {
                            the.pop_tig('info', 1);
                            the.pop.dd = dd.data;
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                change: function ( id ){
                    var the = this;
                    axios.get(de.goods_index, {tid: 1}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            the.goods_list = dd.data;
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                del: function ( id ){
                    var the = this;
                    axios.get(de.goods_index, {tid: 1}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            the.goods_list = dd.data;
                        }
                    }).catch(function(error){
                        console.log(error);
                    });
                },
                // 弹框操作函数
                pop_tig: function ( name , stat ){
                    eval("this.pop."+name+"="+stat);
                }
            },
        });
</script>
</body>
</html>
